<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
    <link rel="icon" type="image/png" href="../assets/img/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>用户管理页面</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
    <!--     Fonts and icons     -->
    <!--    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
    <!-- CSS Files -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../assets/css/light-bootstrap-dashboard.css?v=2.0.0 " rel="stylesheet" />
    <!-- CSS Just for demo purpose, don't include it in your project -->
    <link href="../assets/css/demo.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
</head>

<body>
    <div class="wrapper">
        <div class="sidebar" data-image="../assets/img/sidebar-5.jpg">

            <div class="sidebar-wrapper">
                <div class="logo">
                    <a href="http://www.creative-tim.com" class="simple-text">
                        诗词大王后台管理
                    </a>
                </div>
                <ul class="nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="./user.html">
                            <i class="nc-icon nc-circle-09"></i>
                            <p>编辑个人资料</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="./table.html">
                            <i class="nc-icon nc-notes"></i>
                            <p>名句信息管理</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="./poetryManager.html">
                            <i class="nc-icon nc-pin-3"></i>
                            <p>诗词信息管理</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="./DynastyManager.html">
                            <i class="nc-icon nc-bell-55"></i>
                            <p>朝代管理</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="./KnowManager.html">
                            <i class="nc-icon nc-bell-55"></i>
                            <p>知识管理</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="./PoetsManag.html">
                            <i class="nc-icon nc-bell-55"></i>
                            <p>诗人管理</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="./AncientManager.html">
                            <i class="nc-icon nc-bell-55"></i>
                            <p>古籍管理</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="./IdiomManager.html">
                            <i class="nc-icon nc-bell-55"></i>
                            <p>成语管理</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="main-panel" id="personInfo">
            <!-- Navbar -->
            <nav class="navbar navbar-expand-lg " color-on-scroll="500">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#pablo"> 用户信息 </a>
                    <button href="" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-bar burger-lines"></span>
                        <span class="navbar-toggler-bar burger-lines"></span>
                        <span class="navbar-toggler-bar burger-lines"></span>
                    </button>
                    <div class="collapse navbar-collapse justify-content-end" id="navigation">
                        <ul class="nav navbar-nav mr-auto">
                            <li class="nav-item">
                                <a href="#" class="nav-link" data-toggle="dropdown">
                                    <i class="nc-icon nc-palette"></i>
                                    <span class="d-lg-none">Dashboard</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    <i class="nc-icon nc-zoom-split"></i>
                                    <span class="d-lg-block">&nbsp;Search</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="#pablo">
                                    <span class="no-icon" @click="signOut">退出登录</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- End Navbar -->
            <div class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">编辑个人信息</h4>
                                </div>
                                <div class="card-body">
                                    <form>
                                        <div class="row">
                                            <div hidden="hidden">
                                                <label>ID:</label>
                                                <input type="text" class="form-control" name="id" v-model="user.id">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-5 pr-1">
                                                <div class="form-group">
                                                    <label>所属</label>
                                                    <input type="text" class="form-control" disabled="" placeholder="诗词大王" value="诗词大王系统">
                                                </div>
                                            </div>
                                            <div class="col-md-3 px-1">
                                                <div class="form-group">
                                                    <label>用户名</label>
                                                    <input type="text" class="form-control" placeholder="Username" name="nickname" v-model="user.nickname">
                                                </div>
                                            </div>
                                            <div class="col-md-4 pl-1">
                                                <div class="form-group">
                                                    <label>邮箱地址</label>
                                                    <input type="email" class="form-control" placeholder="Email" name="email" v-model="user.email">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 pr-1">
                                                <div class="form-group">
                                                    <label>姓名</label>
                                                    <input type="text" class="form-control" placeholder="Company" name="name" v-model="user.username">
                                                </div>
                                            </div>
                                            <div class="col-md-6 pr-1">
                                                <div class="form-group">
                                                    <label>密码</label>
                                                    <input type="password" class="form-control" id="password" placeholder="Password" name="password" v-model="user.password">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label>居住地</label>
                                                    <input type="text" class="form-control" placeholder="Home Address" name="address" v-model="user.address">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-4 pr-1">
                                                <div class="form-group">
                                                    <label>城市</label>
                                                    <input type="text" class="form-control" placeholder="City" name="city" v-model="user.city">
                                                </div>
                                            </div>
                                            <div class="col-md-4 px-1">
                                                <div class="form-group">
                                                    <label>国家</label>
                                                    <input type="text" class="form-control" placeholder="Country" name="country" v-model="user.country">
                                                </div>
                                            </div>
                                            <div class="col-md-4 pl-1">
                                                <div class="form-group">
                                                    <label>邮政编码</label>
                                                    <input type="number" class="form-control" placeholder="ZIP Code" name="zipCode" v-model="user.zipCode">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label>关于我</label>
                                                    <textarea rows="4" cols="80" class="form-control" placeholder="Here can be your description" name="aboutMe" v-model="user.aboutMe"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <input type="submit" class="btn btn-info btn-fill pull-right" value="更新信息" @click="update">
                                        <div class="clearfix"></div>
                                    </form>
                                </div>
                            </div>
                        </div>
<!--                        <div class="col-md-4">-->
<!--                            <div class="card card-user">-->
<!--                                <div class="card-image">-->
<!--                                    <img src="https://ununsplash.imgix.net/photo-1431578500526-4d9613015464?fit=crop&fm=jpg&h=300&q=75&w=400" alt="...">-->
<!--                                </div>-->
<!--                                <div class="card-body">-->
<!--                                    <div class="author">-->
<!--                                        <a href="#">-->
<!--                                            <img class="avatar border-gray" src="../assets/img/faces/face-3.jpg" alt="...">-->
<!--                                            <h5 class="title">Mike Andrew</h5>-->
<!--                                        </a>-->
<!--                                        <p class="description">-->
<!--                                            michael24-->
<!--                                        </p>-->
<!--                                    </div>-->
<!--                                    <p class="description text-center">-->
<!--                                        "Lamborghini Mercy-->
<!--                                        <br> Your chick she so thirsty-->
<!--                                        <br> I'm in that two seat Lambo"-->
<!--                                    </p>-->
<!--                                </div>-->
<!--                                <hr>-->
<!--                                <div class="button-container mr-auto ml-auto">-->
<!--                                    <button href="#" class="btn btn-simple btn-link btn-icon">-->
<!--                                        <i class="fa fa-facebook-square"></i>-->
<!--                                    </button>-->
<!--                                    <button href="#" class="btn btn-simple btn-link btn-icon">-->
<!--                                        <i class="fa fa-twitter"></i>-->
<!--                                    </button>-->
<!--                                    <button href="#" class="btn btn-simple btn-link btn-icon">-->
<!--                                        <i class="fa fa-google-plus-square"></i>-->
<!--                                    </button>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<!--   Core JS Files   -->
<script src="../assets/js/core/jquery.3.2.1.min.js" type="text/javascript"></script>
<script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<!--  Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="../assets/js/plugins/bootstrap-switch.js"></script>
<!--  Google Maps Plugin    -->
<!--<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>-->
<!--  Chartist Plugin  -->
<script src="../assets/js/plugins/chartist.min.js"></script>
<!--  Notifications Plugin    -->
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Light Bootstrap Dashboard: scripts for the example pages etc -->
<script src="../assets/js/light-bootstrap-dashboard.js?v=2.0.0 " type="text/javascript"></script>
<!-- Light Bootstrap Dashboard DEMO methods, don't include it in your project! -->
<script src="../assets/js/demo.js"></script>

<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入axios 实现页面的异步请求-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    let vm = new Vue({
        el:"#personInfo",
        data:{
            user:{
                id:'',
                email:'',
                username:'',
                password:'',
                nickname:'',
                address:'',
                city:'',
                country:'',
                zipCode:'',
                aboutMe:''
            }
        },
        methods:{
            update:function (r) {
                if (window.confirm("是否确定更新个人信息？？")){
                    axios({
                        url:"/user/update",
                        method:"POST",
                        data:this.user
                    }).then(function (r) {
                        console.log(r.data)
                        alert("更新成功！！");
                        //alert("新密码： "  + document.getElementById("password").value)
                        location.href="/login.html"
                    })
                }else {
                    return false;
                }
            },
            // 退出登录
            signOut:function () {
                if (window.confirm("是否确认退出登录？？")){
                    axios({
                        url:"/user/signOut",
                        data:"GET"
                    }).then(function (r) {
                        location.href = "/login.html";
                    })
                }else {
                    return false;
                }
            }
        },
        created:function () {
            axios({
                url:"/user/info",
                method:"POST",
                data:this.user
            }).then(function (r) {
                vm.user.id = r.data.id;
                vm.user.username  = r.data.username;
                vm.user.email = r.data.email
                vm.user.password = r.data.password;
                vm.user.nickname = r.data.nickname;
                vm.user.address = r.data.address;
                vm.user.city = r.data.city;
                vm.user.country = r.data.country;
                vm.user.zipCode = r.data.zipCode;
                vm.user.aboutMe = r.data.aboutMe;
            })
        }
    })
</script>
</html>
